<template>
  <div class="card card3">
    <h2><span /></h2>
    <chart ref="chart" :data="data" />
  </div>
</template>

<script>
import Bus from '@/common/bus'
import chart from './chart'

export default {
  components: {
    chart
  },
  data() {
    return {
      isLine: false,
      plateInfo: {},
      data: {}
    }
  },
  created() {
    const that = this
    Bus.$on('nodeInfo', nodeInfo => {
      that.isLine = false
      that.plateInfo = nodeInfo.nodeDialPlate
      that.getData()
    })
    Bus.$on('lineInfo', lineInfo => {
      that.isLine = true
      that.plateInfo = lineInfo.linePlate
      that.getData()
    })
  },
  methods: {
    getData() {
      this.data = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '55%'],
            radius: '90%',
            min: 0,
            max: this.plateInfo.type == 1 ? 10 : 100,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                width: 6,
                color:
                  this.plateInfo.type == 1
                    ? [
                        [0, '#53FF53'],
                        [1, '#53FF53']
                      ]
                    : [
                        [0.3, '#67e0e3'],
                        [0.7, '#37a2da'],
                        [1, '#fd666d']
                      ]
              }
            },
            pointer: {
              width: 3,
              length: '50%',
              itemStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              distance: 10,
              length: 6,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: '#fff',
              distance: 10,
              fontSize: 12
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize: 16,
              color: '#fff'
            },
            data: [
              {
                value: this.plateInfo.value
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
